<template>
    <div class="topbkimg">
        <div class="title"><span>相册 -{{ $route.query.title }}</span></div>
        <img :src=$route.query.imgurl alt="">
    </div>
    <div class="imglist-box">
        <div class="imglist">
            <el-image class="img img-item" v-for="(item, index) in imglist" :src="item.url" :zoom-rate="1.2" :max-scale="7"
                :min-scale="0.2" :preview-src-list="srcList" :initial-index="index" fit="cover"
                :preview-teleported="true" />
        </div>
    </div>
    <div class="observer">
        {{ isend ? "暂无更多" : "下拉加载更多" }}
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { } from "@/api/imglist.js"
import { getPic } from "@/api/imglist.js"
import { deepClone } from "@/utils/index.js"
let router = useRouter();
let route = useRoute();
let page = ref(1);
let pageSize = ref(50);
let imglist = ref([]);
let isend = ref(false)
let observers
const srcList = ref([])
async function loa() {
    let res = await getPic({
        page: page.value,
        pageSize: pageSize.value,
        aumble_id: route.query.pid
    })
    if (res.data.status == 200) {
        let data = deepClone(res.data.data)
        imglist.value = imglist.value.concat(data)
        srcList.value = srcList.value.concat(data.map(item => item.url))
    } else {
        isend.value = true
        ElNotification.warning({
            title: 'warning',
            message: '暂无数据',
            offset: 50,
        })
    }
}
function observe1() {
    let box = document.querySelector('.observer')
    observers = new IntersectionObserver(async (entries) => {
        if (entries[0].intersectionRatio > 0) {
            setTimeout(async () => {
                page.value += 1
                await loa()
                if (isend.value) {
                    observers.unobserve(box)
                }

            }, 400)
        }
    })
    observers.observe(box)
}
onMounted(async () => {
    await loa()
    observe1()

})
</script>

<style lang="scss" scoped>
.observer {
    text-align: center;
    font-size: $font-size-s;
}

.img-item:hover {
    box-shadow: 0 3px 6px 3px rgba(7, 17, 27, .15) !important;
    filter: saturate(2) drop-shadow(0 0 5px rgba(0, 0, 0, .66));
    transform: translateY(-3px);
}

.img {
    height: 20vh;
    width: 15vw;
    margin-bottom: 10px;
}

.topbkimg {
    height: 35vh;
    width: 100%;
    position: relative;
}

.imglist-box {
    position: relative;
    height: 100vh;
    width: 100%;
    @include bk-style;
}

.imglist {
    width: 65%;
    /* background-color: rgba(0,0,0,.1); */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translate(-50%, 0);

    @include userTheme {
        background-color: getThemeValue("imglistColor");
    }

    padding: 10px;
    box-sizing: border-box;
}

.topbkimg img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.5vmax;
    color: #fff;

    @include userTheme {
        font-family: getThemeValue("fontfamily");
    }

    letter-spacing: 0.2vmax;
}

@media only screen and (max-width: 650px) {
    .imglist {
        width: 85%;
        top: 5%;
    }

    .img {
        height: 12vh;
        width: 33vw;
        margin-bottom: 10px;
    }

}</style>